<template>
    <sub-box>
        <breadcrumb :title="'应用详情'"></breadcrumb>
        <div class="box white-block" v-loading="loading">
            <el-steps :active="step-1" :align-center="true">
                <el-step icon="el-icon-edit" title="基本信息">
                    <div slot="icon" class="circle">
                        <i class="iconfont icon-info" :class="{'icon-info-circle':step>1}"></i>
                    </div>
                    <div slot="title" class="title">
                        基本信息
                    </div>
                </el-step>
                <el-step icon="el-icon-edit" title="详细信息">
                    <div slot="icon" class="circle">
                        <i class="iconfont icon-apps" :class="{'icon-apps-solid':step>2}"></i>
                    </div>
                    <div slot="title" class="title">
                        详细信息
                    </div>
                </el-step>
                <el-step icon="el-icon-edit" title="详细信息">
                    <div slot="icon" class="circle">
                        <i class="iconfont icon-cloud-circle" :class="{'icon-cloud':step>2}"></i>
                    </div>
                    <div slot="title" class="title">
                        详细信息
                    </div>
                </el-step>
            </el-steps>
            <div v-show="step==1" class="content">
                <el-form class="form-common" :model="ruleForm" :rules="rule" ref="ruleForm" label-width="1.2rem">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="应用类型" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请选择" class="openWay">
                            <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择分类" prop="category">
                        <el-select v-model="ruleForm.category" placeholder="请选择" class="openWay">
                            <el-option-group
                                v-for="group in categoryList"
                                :key="group.categoryName"
                                :label="group.categoryName">
                                <el-option
                                    v-for="item in group.children"
                                    :key="item.id"
                                    :label="item.categoryName"
                                    :value="item.id">
                                </el-option>
                            </el-option-group>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用来源" prop="source">
                        <el-input v-model="ruleForm.source" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="state">
                        <el-select v-model="ruleForm.state" placeholder="请选择" class="openWay">
                            <el-option
                                v-for="item in stateList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核流程" prop="flowList">
                        <el-button type="primary" class="min" @click="openDialog">编辑</el-button>
                        <div class="mt20 flow-list" v-if="ruleForm.flowList[0]">
                            <el-row v-for="(list,index) in ruleForm.flowList" :key="index">
                                <el-col :span="3">
                                    <div class="num">{{index+1}}</div>
                                </el-col>
                                <el-col :span="11">
                                    <div class="department ellipsis" :title="list.dept.label">部门：
                                        {{list.dept.label}}
                                    </div>
                                </el-col>
                                <el-col :span="9" :offset="1">
                                    <div class="role ellipsis">角色：{{list.roleName}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form-item>
                    <el-form-item label="图标" prop="fileList">
                        <upload :fileList.sync="ruleForm.fileList" :listType="'picture'" @change="change"></upload>
                    </el-form-item>
                    <el-form-item label="厂商" prop="firm" v-if="ruleForm.type==3">
                        <el-input v-model="ruleForm.firm"></el-input>
                    </el-form-item>
                    <el-form-item label="链接" prop="path" v-if="ruleForm.type==3">
                        <el-input v-model="ruleForm.path"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div v-show="step==2" class="content">
                <div>
                    <el-form class="form-common" :model="appDetail" :rules="rule1" ref="appDetail" label-width="1.2rem">
                        <el-form-item label="概述" prop="description">
                            <el-input v-model="appDetail.description"></el-input>
                        </el-form-item>
                        <el-form-item label="banner" prop="fileList">
                            <upload :fileList.sync="appDetail.fileList" :listType="'picture'"
                                    @change="bannerChange"></upload>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="mt20">
                    <!--<p class="products">产品介绍</p>-->
                    <div class="head-line module">产品介绍</div>
                    <div class="clearfix module bg mt20" v-for="(list,index) in DetailList" :key="index">
                        <el-link :underline="false" class="close" @click="removeModule(index)"><i
                            class="el-icon-close"></i></el-link>
                        <p>模块{{index+1}}</p>
                        <el-form class="form-common" :model="list" :rules="rule2" :ref="'detailList'+index"
                                 label-width="1.2rem">
                            <el-form-item label="标题" prop="title">
                                <el-input v-model="list.title"></el-input>
                            </el-form-item>
                            <el-form-item label="文本" prop="content">
                                <el-input type="textarea" v-model="list.content"
                                          :autosize="{ minRows: 4, maxRows: 4}"></el-input>
                            </el-form-item>
                            <el-form-item label="图片" prop="fileList">
                                <upload :fileList.sync="list.fileList" :listType="'picture'" :badge="index" :limit="10"
                                        @change="detailPicChange"></upload>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="module mt20">
                        <el-button class="primary btn1" @click="addModule">增加模块</el-button>
                    </div>
                </div>
            </div>
            <div v-show="step==3" class="content layout">
                <div class="add">
                    <upload :fileList.sync="docList" :showFileList="false" ref="docList">
                        <el-button type="primary" slot="trigger">新增</el-button>
                        <span slot="tip"></span>
                    </upload>
                    <el-button @click="docListRemove">删除</el-button>
                </div>
                <div class="table">
                    <table-example :data="docList" :tableColumn="header" :slotColumns="slotColumns"
                                   :selection="true" class="mt20" @selectionChange="selectionChange">
                        <template slot="size" slot-scope="scope">
                            <span v-if="scope.row.size">{{scope.row.size | size }}</span>
                        </template>
                        <template slot="date" slot-scope="scope">
                            <span v-if="scope.row.date">{{scope.row.date}}</span>
                        </template>
                    </table-example>
                </div>
            </div>
            <div class="btn">
                <el-button class="minor" v-show="step>1" size="large" @click="step--">上一步</el-button>
                <el-button class="primary" size="large" v-show="step<3" @click="next">下一步</el-button>
                <el-button type="primary" size="large" v-if="step>2" @click="next">保存</el-button>
            </div>
        </div>
        <dialog-msk :show.sync="show" :title.sync="dialogTitle" ref="dialog" @cancel="closeDialog" :toBody="false"
                    :width="'700px'">
            <div slot="footer" class="text-center">
                <el-button type="primary" @click="saveDialog">确定</el-button>
                <el-button @click="closeDialog">取消</el-button>
            </div>
            <div>
                <el-button :size="'small'" class="primary" @click="addFlowList">添加</el-button>
                <div class="mt20 flow-list list1" v-if="flowList[0]" v-for="(list,index) in flowList" :key="index">
                    <el-form :model="list" :rules="ruleFlow" :ref="'ruleFlow'+index"
                             label-width="0" :inline="true">
                        <el-form-item>
                            <div class="num">{{index+1}}</div>
                        </el-form-item>
                        <el-form-item prop="dept">
                            <div class="department">
                                <!--                                <select-tree @loadNode="loadNode" :lazy="true" :model.sync="list.dept"-->
                                <!--                                             class="openWay"></select-tree>-->
                                <select-tree @loadNode="loadNode" class="openWay"
                                             :loading.sync="provideDeptTree.loading"
                                             :keyWord.sync="provideDeptTree.keyWord"
                                             :renderTree.sync="provideDeptTree.renderTree"
                                             :lazy.sync="provideDeptTree.lazy"
                                             :clearable.sync="provideDeptTree.clearable"
                                             :filterable.sync="provideDeptTree.filterable"
                                             :model.sync="list.dept"
                                             :accordion.sync="provideDeptTree.accordion"
                                             :expandAll.sync="provideDeptTree.expandAll"
                                             :provideDeptTree="provideDeptTree"
                                             @filterMethod="dataFilter"
                                             :props="dataConsumersprops"
                                             :options="provideDeptTree.options"
                                             @nodeClick="treeNodeClick"
                                             @selectVisibleChange="selectVisibleChange">
                                </select-tree>
                            </div>
                        </el-form-item>
                        <el-form-item prop="roleId">
                            <div class="role">
                                <el-select v-model="list.roleId" placeholder="角色" class="openWay"
                                           @change="changeList($event,list,'role')">
                                    <el-option
                                        v-for="item in flow.roleList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-link type="primary" :underline="false" v-if="flowList.length>1&&index>0" class="mr10"
                                     @click="rowUp(list,index)">
                                向上
                            </el-link>
                            <el-link type="primary" :underline="false" v-if="flowList.length>1&&index<1" class="mr10"
                                     @click="rowDown(list,index)">
                                向下
                            </el-link>
                            <el-link type="primary" :underline="false" @click="remove(index)">删除</el-link>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </dialog-msk>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import upload from '../../components/upload'
    import tableExample from '../../components/table'
    import breadcrumb from '../../components/breadcrumb'
    import dialogMsk from '../../components/dialog'
    import selectTree from '../../components/select-tree'

    export default {
        data() {
            let _this = this,
                fileChange = (rule, value, callback) => {
                    if (!value[0]) {
                        return callback(new Error('请上传图标'))
                    } else {
                        callback()
                    }
                }, fileChange1 = (rule, value, callback) => {
                    if (!value[0]) {
                        return callback(new Error('请上传banner'))
                    } else {
                        callback()
                    }
                }, fileChange2 = (rule, value, callback) => {
                    if (!value[0]) {
                        return callback(new Error('请上传图片'))
                    } else {
                        callback()
                    }
                },
                flowChange = (rule, value, callback) => {
                    if (!value[0]) {
                        return callback(new Error('请选择审核流程'))
                    } else {
                        callback()
                    }
                },
                firmBlur = (rule, value, callback) => {
                    if (!value && _this.ruleForm.type === 3) {
                        return callback(new Error('请输入厂商'))
                    } else {
                        callback()
                    }
                },
                firmPathBlur = (rule, value, callback) => {
                    if (!value && _this.ruleForm.type === 3) {
                        return callback(new Error('请输入链接'))
                    } else {
                        callback()
                    }
                },
                deptChange = (rule, value, callback) => {
                    if (!_this.selectVisible && !value.value) {
                        return callback(new Error('请选择部门'))
                    } else {
                        callback()
                    }
                }
            return {
                step: 1,
                input: '',
                loading: false,
                typeList: [
                    {
                        value: 1,
                        label: '工具'
                    },
                    {
                        value: 2,
                        label: '服务'
                    },
                    {
                        value: 3,
                        label: '平台'
                    }
                ],
                categoryList: [],
                stateList: [
                    {
                        value: 1,
                        label: '上架'
                    },
                    {
                        value: 2,
                        label: '下架'
                    }
                ],
                flow: null,
                flowList: [], // 弹窗内审核流程列表
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '文档',
                        minWidth: '25%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'size',
                        label: '大小',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'date',
                        label: '日期',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    }
                ],
                slotColumns: ['size', 'date'],
                ruleForm: {
                    name: '', // 应用名称
                    type: 1, // 应用类型
                    category: '', // 应用所属分类
                    state: 1, // 应用状态
                    source: '', // 应用来源
                    firm: '', // 厂商
                    path: '', // 厂商链接
                    fileList: [], // 图标文件列表
                    flowList: [] // 页面中审核流程列表
                },
                rule: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    firm: [
                        {required: true, validator: firmBlur, trigger: 'blur'}
                    ],
                    path: [
                        {required: true, validator: firmPathBlur, trigger: 'blur'}
                    ],
                    category: [
                        {required: true, message: '请选择分类', trigger: 'change'}
                    ],
                    flowList: [
                        {required: true, validator: flowChange, trigger: 'change'}
                    ],
                    fileList: [
                        {required: true, validator: fileChange, trigger: 'change'}
                    ]
                },
                appDetail: {
                    description: '',
                    fileList: []
                },
                rule1: {
                    description: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    fileList: [
                        {required: true, validator: fileChange1, trigger: 'change'}
                    ]
                },
                DetailList: [],
                rule2: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'}
                    ],
                    fileList: [
                        {required: true, validator: fileChange2, trigger: 'change'}
                    ]
                },
                ruleFlow: {
                    dept: [
                        {required: true, validator: deptChange, trigger: 'change'}
                    ],
                    roleId: [
                        {required: true, message: '请选择角色', trigger: 'change'}
                    ]
                },
                docList: [],
                docSelection: [],
                id: '',
                detail: null,
                dialogTitle: '审核流程编辑',
                show: false,
                firstDeptList: null,
                dataConsumersprops: {
                    value: 'code', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.expand) return true
                    }
                },
                provideDeptTree: { // 数据源部门树形下拉框参数
                    lazy: true,
                    clearable: false,
                    filterable: false,
                    accordion: false, // 一次只展开一个同级节点
                    expandAll: false, // 默认展开所有节点
                    loading: false, // 是否显示loading
                    renderTree: true, // 是否显示tree，隐藏后再次显示以此来重新渲染
                    options: [],
                    keyWord: ''
                },
                selectTreeFilter: null,
                selectVisible: false
            }
        },
        mounted() {
            this.id = this.$route.params.id
            this.getCategory()
            this.getFlow()
            if (this.id) this.getDetail()
        },
        filters: {
            size: function (value) {
                let size = ''
                if (value > 0 && value < 1000 * 1000) {
                    size = (value / 1000).toFixed(2) + 'K'
                } else if (value < 1000 * 1000 && value < 1000 * 1000 * 1000) {
                    size = (value / (1000 * 1000)).toFixed(2) + 'M'
                }
                return size
            }
        },
        methods: {
            addModule() {
                this.DetailList.push({
                    title: '',
                    content: '',
                    fileList: []
                })
                this.$nextTick(() => {
                    this.$method.updateView(true, true)
                })
            },
            removeModule(index) {
                this.DetailList.splice(index, 1)
                this.$nextTick(() => {
                    this.$method.updateView(true, true)
                })
            },
            change(file, fileList) {
                this.ruleForm.fileList = fileList.slice(-1)
                this.$refs.ruleForm.validateField('fileList')
            },
            bannerChange(file, fileList) {
                this.appDetail.fileList = fileList.slice(-1)
                this.$refs.appDetail.validateField('fileList')
            },
            detailPicChange(file, fileList, index) {
                this.DetailList[index].fileList = fileList
                this.$refs['detailList' + index][0].validateField('fileList')
            },
            docListChange(file, fileList, index) {
                this.docList = fileList
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            next() {
                if (this.step === 1) {
                    this.validate('ruleForm', () => {
                        this.step++
                        this.$nextTick(() => {
                            this.$method.updateView(false, true)
                        })
                    })
                } else if (this.step === 2) {
                    this.validate('appDetail', () => {
                        let verify = true, _this = this
                        for (let i = 0; i < this.DetailList.length; i++) {
                            _this.$refs['detailList' + i][0].validate((valid) => {
                                if (verify) {
                                    if (valid) {
                                        verify = true
                                    } else {
                                        verify = false
                                    }
                                }
                            })
                        }
                        if (verify) {
                            this.step++
                            this.$nextTick(() => {
                                this.$method.updateView(false, true)
                            })
                        }
                    })
                } else {
                    let url = '', obj
                    if (this.id) {
                        url = '/admin/workbench/updateRes'
                    } else {
                        url = '/admin/workbench/createRes'
                    }
                    obj = {
                        approvalConfigObj: {
                            itemList: []
                        },
                        banner: this.appDetail.fileList[0].id,
                        category: this.ruleForm.category,
                        description: this.appDetail.description,
                        docList: [],
                        icon: this.ruleForm.fileList[0].id,
                        id: this.id,
                        name: this.ruleForm.name,
                        popular: this.detail ? this.detail.popular : 0,
                        state: this.ruleForm.state,
                        type: this.ruleForm.type,
                        resIntroVO: {
                            moduleList: []
                        },
                        resSource: this.ruleForm.source
                    }
                    if (this.docList[0]) {
                        this.docList.forEach(item => {
                            obj.docList.push({
                                // id: item.id
                                fileUrl: item.id
                                // name: item.name
                            })
                        })
                    }
                    if (this.DetailList[0]) {
                        this.DetailList.forEach(item => {
                            obj.resIntroVO.moduleList.push({
                                content: item.content,
                                imgUrl: item.fileList[0].id,
                                title: item.title
                            })
                        })
                    }
                    if (this.ruleForm.flowList[0]) {
                        // obj.approvalConfigObj.itemList = this.ruleForm.flowList
                        obj.approvalConfigObj.itemList = []
                        this.ruleForm.flowList.forEach(item => {
                            obj.approvalConfigObj.itemList.push(
                                {
                                    deptId: item.dept.value,
                                    roleId: item.roleId
                                }
                            )
                        })
                    }
                    this.loading = true
                    this.$http.post(url, obj).then(result => {
                        this.loading = false
                        if (result.success) {
                            this.$emit('upload')
                            this.$nextTick(() => {
                                this.$method.historyBack()
                            })
                        }
                    }).catch(() => {
                        this.loading = false
                    })
                }
            },
            getCategory() {
                this.$http.get('/gsCategoryManage/getTree').then(result => {
                    if (result.success) {
                        this.categoryList = result.data
                        this.$method.updateView(false, true)
                    }
                })
            },
            getFlow() {
                this.$http.get('/admin/workbench/res/dataMap').then(result => {
                    if (result.success) {
                        this.flow = result.data
                        this.$method.updateView(false, true)
                    }
                })
            },
            getDetail() {
                this.$http.get('/admin/workbench/getRes', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        let data = result.data, _this = this
                        this.detail = data
                        if (data.approvalConfigObj && data.approvalConfigObj.itemList[0]) {
                            // this.ruleForm.flowList = data.approvalConfigObj.itemList
                            this.ruleForm.flowList = []
                            data.approvalConfigObj.itemList.forEach(item => {
                                this.ruleForm.flowList.push({
                                    dept: {
                                        value: item.deptId,
                                        label: item.deptName
                                    },
                                    roleId: item.roleId,
                                    roleName: item.roleName
                                })
                            })
                        }
                        if (data.resIntroVO && data.resIntroVO.moduleList[0]) {
                            data.resIntroVO.moduleList.forEach(item => {
                                _this.DetailList.push({
                                    content: item.content,
                                    fileList: [item.fileInfo],
                                    title: item.title
                                })
                            })
                        }
                        if (data.docList && data.docList[0]) {
                            data.docList.forEach(item => {
                                _this.docList.push(item.fileObjList[0])
                            })
                        }
                        if (data.bannerInfo) this.appDetail.fileList = data.bannerInfo
                        if (data.iconInfo) this.ruleForm.fileList.push(data.iconInfo)
                        if (data.category) this.ruleForm.category = data.category
                        if (data.name) this.ruleForm.name = data.name
                        if (data.state) this.ruleForm.state = data.state
                        if (data.type) this.ruleForm.type = data.type
                        if (data.description) this.appDetail.description = data.description
                        if (data.resSource) this.ruleForm.source = data.resSource
                    }
                    this.$method.updateView(false, true)
                }).catch(() => {

                })
            },
            selectionChange(val) {
                this.docSelection = val
            },
            docListRemove() {
                this.docList = this.docList.filter(el => !this.docSelection.includes(el))
            },
            openDialog() {
                this.show = true
                this.flowList = [...this.ruleForm.flowList]
                if (!this.flowList[0]) {
                    this.flowList.push({
                        dept: {
                            value: '',
                            label: ''
                        },
                        roleId: '',
                        roleName: ''
                    })
                }
            },
            closeDialog() {
                this.flowList = []
                this.show = false
            },
            saveDialog() {
                let verify = true, _this = this
                if (this.flowList[0]) {
                    for (let i = 0; i < this.flowList.length; i++) {
                        _this.$refs['ruleFlow' + i][0].validate((valid) => {
                            if (verify) {
                                if (valid) {
                                    verify = true
                                } else {
                                    verify = false
                                }
                            }
                        })
                    }
                }
                if (verify) {
                    this.ruleForm.flowList = [...this.flowList]
                    this.closeDialog()
                }
            },
            addFlowList() {
                this.flowList.push({
                    dept: {
                        value: '',
                        label: ''
                    },
                    roleId: '',
                    roleName: ''
                })
            },
            changeList(event, list, name) {
                let obj
                if (name === 'role') {
                    obj = this.flow.roleList.find((item) => {
                        return item.id === event
                    })
                    list.roleName = obj.name
                }
            },
            rowUp(row, index) {
                this.flowList.splice(index, 1)
                this.flowList.splice(index - 1, 0, row)
                this.$nextTick(() => {
                    this.$refs['ruleFlow' + index][0].clearValidate()
                })
            },
            rowDown(row, index) {
                this.flowList.splice(index + 2, 0, row)
                this.flowList.splice(index, 1)
                this.$nextTick(() => {
                    this.$refs['ruleFlow' + index][0].clearValidate()
                })
            },
            remove(index) {
                this.flowList.splice(index, 1)
            },
            dataFilter(event, callback) {
                if (this.selectTreeFilter) clearTimeout(this.selectTreeFilter)
                if (event || event !== '') {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = false
                        this.provideDeptTree.keyWord = event
                        this.$http.get('/admin/workbench/getDeptList', {
                            keyWord: event
                        }).then(result => {
                            if (result.success) {
                                this.provideDeptTree.loading = false
                                this.provideDeptTree.options = this.$method.treeProcess(result.data)
                            }
                            this.selectTreeFilter = null
                            if (callback) callback()
                        }).catch(() => {
                            this.provideDeptTree.loading = false
                            this.selectTreeFilter = null
                            if (callback) callback()
                        })
                    }, 300)
                } else {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = true
                        this.provideDeptTree.keyWord = ''
                        if (callback) callback()
                    }, 300)
                }

            },
            loadNode(parentId, callback) {
                if (!parentId && this.firstDeptList) {
                    this.provideDeptTree.loading = false
                    if (callback) callback(this.firstDeptList)
                } else {
                    this.$http.get('/admin/workbench/res/deptList', {
                        parentId: parentId
                    }).then(result => {
                        if (result.success) {
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    // if (item.expand) {
                                    //     item.isLeaf = false
                                    // } else {
                                    //     item.isLeaf = true
                                    // }
                                    if (!item.label) {
                                        item.label = item.abbreviation || item.name
                                    }
                                })
                                if (!this.firstDeptList) this.firstDeptList = result.data
                            }
                            this.provideDeptTree.loading = false
                            if (callback) callback(result.data || [])
                        }
                    }).catch(() => {
                        this.provideDeptTree.loading = false
                        this.$message({
                            type: 'info',
                            message: '获取部门失败!'
                        })
                    })
                }
            },
            treeNodeClick(node, callback) {
                if (callback) callback()
            },
            selectVisibleChange(visible) {
                this.selectVisible = visible
            }
        },
        components: {
            upload,
            subBox,
            tableExample,
            breadcrumb,
            dialogMsk,
            selectTree
        }
    }
</script>
<style scoped lang="less">
    .box {
        padding-top: 1rem;
        padding-bottom: .8rem;

        .content {
            margin-top: .6rem !important;

            div {

                .content-l {
                    margin-left: 4.6rem;
                    margin-right: .3rem;
                    text-align: right;
                    float: left;
                    width: .8rem;

                }

                .icon {
                    padding-top: .2rem;
                }

                .content-r {
                    float: left;
                }

                .input {
                    width: 5.6rem;
                    height: .6rem;
                }
            }

            .products {
                position: relative;
                font-size: .18rem;
                padding-left: .1rem;
                margin-left: 3.26rem;
                padding-bottom: .3rem;
                margin-top: .6rem;

                &:after {
                    content: "";
                    position: absolute;
                    top: .05rem;
                    left: 0;
                    width: .03rem;
                    height: .12rem;
                    background-color: #4995F4;
                }
            }

            .module {
                width: 10rem;
                margin-left: auto;
                margin-right: auto;
                position: relative;

                &.bg {
                    padding: .3rem;
                    background-color: #F5F8FB;
                    font-size: .18rem;
                }

                p {
                    padding-bottom: .2rem;
                }

                .title {
                    margin-left: .3rem;
                    margin-right: .3rem;
                    padding-top: .1rem;
                    text-align: right;
                    float: left;
                    width: .8rem;
                }

                .icon {
                    padding-top: .25rem;
                }

                .title-r {
                    float: left;

                    .input1 {
                        height: 1rem;
                    }
                }

                .close {
                    position: absolute;
                    top: .15rem;
                    right: .15rem;
                    font-size: .2rem;
                }
            }

            .btn1 {
                min-width: 1.1rem;
                min-height: .34rem;
            }

            .add {
                /*margin-left: 2rem;*/

                > * {
                    display: inline-block;
                }
            }

            .table {
                /*margin-left: 2rem;*/
                width: 12.4rem;
            }

        }

        .btn {
            text-align: center;
            margin-top: .8rem;

            .button {
                width: 1.4rem;
                height: .5rem;
            }
        }
    }

    .flow-list {
        background-color: #F9F9F9;
        padding: .2rem;
        line-height: .24rem;

        > div {
            margin-bottom: .2rem;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .num {
            width: .24rem;
            height: .24rem;
            line-height: .24rem;
            margin: 0 auto;
            border-radius: 50%;
            background-color: #DB9234;
            color: #fff;
            text-align: center;
        }

        &.list1 {
            line-height: .4rem;
            padding-bottom: 0;

            .num {
                margin-top: .08rem;
            }
        }
    }

    .el-step__head {
        .circle {
            width: .8rem;
            height: .8rem;
            border: .02rem solid #EFEFEF;
            text-align: center;
            line-height: .76rem;
            border-radius: 50%;
            color: #EFEFEF;

            i {
                font-size: .3rem;
            }
        }

        &.is-finish {
            .circle {
                color: #4995f4;
                border-color: #4995f4;
            }
        }

        &.is-process {
            .circle {
                color: #fff;
                border-color: #4995f4;
                background-color: #4995f4;
            }
        }

    }

    .el-step__title {
        .title {
            margin-top: .3rem;
            color: #999;
        }

        &.is-finish, &.is-process {
            .title {
                color: #333;
            }
        }
    }

    .form-common {
        width: 6.4rem;
        margin: 0 auto;
    }

    .openWay {
        width: 100%;
    }
</style>
